<template>
  <dw-menu-datagrid-form
    ref="businessServiceGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #dictItemColor="{ scope }">
      <el-tag dw-if="scope.row.dictItemColor" :color="scope.row.dictItemColor" effect="dark" type="info" round>{{ scope.row.dictItemName }}</el-tag>
    </template>
    <template #formSlot>
      <table class="dw-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">服务名称</span></td>
            <td>
              <el-form-item
                prop="serviceName"
                :rules="[
                  {
                    required: true,
                    message: '请填写字业务服务名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.serviceName" placeholder="请输入业务服务名称..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">代码模板</span></td>
            <td>
              <el-form-item
                prop="serviceCodeTemplateId"
                :rules="[
                  {
                    required: true,
                    message: '请选择生成代码模板!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.serviceCodeTemplateId" placeholder="请选择生成代码模板..."></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span class="required">开发服务器</span></td>
            <td>
              <el-form-item
                prop="devHostMachineId"
                :rules="[
                  {
                    required: true,
                    message: '开发主机不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <dw-select v-model="formData.devHostMachineId" url="/admin-api/assets/host/machine/list" text-field="ipAddress" value-field="id"></dw-select>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">端口</span></td>
            <td>
              <el-form-item
                prop="port"
                :rules="[
                  {
                    required: true,
                    message: '端口号不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input-number v-model="formData.port" :min="0" :max="65535" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span class="required">部署脚本模板</span></td>
            <td></td>
            <td class="dw-td-label">排序号</td>
            <td>
              <el-form-item prop="sortNo">
                <el-input-number v-model="formData.sortNo" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span>服务说明</span></td>
            <td colspan="3">
              <el-form-item prop="serviceMemo">
                <el-input v-model="formData.serviceMemo" maxlength="250" placeholder="请输入服务说明..." show-word-limit type="textarea" />
              </el-form-item>
            </td>
          </tr>
        </tbody>
      </table>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IBusinessService } from '../business-service';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import DwSelect from '@/components/selector/dropdown-selector/index.vue';
defineOptions({
  name: 'DictItemFormGrid',
});

const businessServiceGridRef = ref();
const dataGridTitle = '业务服务列表';
const formData = ref<IBusinessService>({
  id: '',
  businessCategoryId: '',
  serviceName: '',
  devHostMachineId: '',
  port: 8080,
  serviceCodeTemplateId: '',
  serviceMemo: '',
  sortNo: 1,
});

const renderFormTitle = (stateValue: 'add' | 'edit', data: IBusinessService) => {
  if (stateValue === 'add') {
    return '业务服务信息';
  } else {
    return data.serviceName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'serviceName',
    label: '服务名称',
    width: 320,
  },
  {
    prop: 'devHostMachineIpAddress',
    label: '开发主机IP',
    width: 200,
  },
  {
    prop: 'port',
    label: '端口',
    width: 100,
  },
  {
    prop: 'serviceMemo',
    label: '服务说明',
  },
  {
    prop: 'releaseState',
    label: '发布状态',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const params = ref({
  businessCategoryId: '',
  keyword: '',
});
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/business/service/#{id}',
  delInfoMsgEmphasize: '#{serviceName}',
};

const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/business/service/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IBusinessService> = {
  url: '/admin-api/sys/business/service/page/list',
  query: () => {
    return { businessCategoryId: params.value?.businessCategoryId || '' };
  },
};

const getInfoHttpConfig: IGetInfoHttpConfig<IBusinessService> = {
  url: '/admin-api/sys/business/service/#{id}',
};

const addInfoHttpConfig: IAddInfoHttpConfig<IBusinessService> = {
  url: '/admin-api/sys/business/service',
};

const updateInfoHttpConfig: IUpdateInfoHttpConfig<IBusinessService> = {
  url: '/admin-api/sys/business/service',
};
const loadData = (businessCategoryId: string) => {
  params.value.businessCategoryId = businessCategoryId;
  formData.value.businessCategoryId = businessCategoryId;
  businessServiceGridRef.value.loadData();
};
const setBusinessCategoryId = (businessCategoryId: string) => {
  params.value.businessCategoryId = businessCategoryId;
  formData.value.businessCategoryId = businessCategoryId;
};
defineExpose({ loadData, setBusinessCategoryId });
</script>
<style lang="scss" scoped></style>
